<template>
    <div class="shopcart_wrapper">
      <div class="shopcart" @click="toogleCart">
      <div class="content-left">
        <div class="logo-wrapper">
          <div class="radius" :class="[foodsCount===0?'':'current']">
            <i class="icon-shopping_cart"></i>
          </div>
          <div class="badge" v-show="foodsCount!=0">
            <span>{{foodsCount}}</span>
          </div>
          <div class="badge badge-hook" id="badge"></div>
        </div>
        <div class="price" :class="[countPrice===0?'':'priceSelect']"> ￥{{countPrice}}</div>
        <div class="desc">另需配送费￥4</div>
      </div>
        <div class="content-right" :class="[payPrice==='去结算'? 'pay_button':'']" @click.prevent.stop="pay">{{payPrice}}</div>
      </div>

      <transition name="fold">
        <div class="cartInfo" v-show="maskFlag">
          <div class="list-header">
            <span class="title">购物车</span>
            <span class="clear" @click="clearCart">清空</span>
          </div>
          <div class="list-wrapper" ref="listContent">
            <ul class="list">
              <li class="list-cell" v-for="item in foods" :key="item.id">
                <div class="name">{{item.name}}</div>
                <div class="rt-box">
                  <div class="price">￥{{item.price}}</div>
                  <v-fcount class="num-box" :foodsinfo="item"></v-fcount>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </transition>
      <transition name="toggleCar">
        <div class="list-mask"   v-show="maskFlag" @click.prevent="toogleCart"></div>
      </transition>

      <div class="ball-container">
        <transition-group name="drop" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
          <div class="ball" v-for="item in balls" v-show="item.show" ref="ball" :key="item.index">
            <div class="inner inner-hook"></div>
          </div>
        </transition-group>
      </div>
    </div>

</template>

<script>
  import FoodCounter from '../foodCounter/FoodCounter'
  import mui from '../../lib/mui/js/mui'
  import BScroll from 'better-scroll'
  export default {
    name: "Shopcart",
    components: {
      'v-fcount': FoodCounter
    },
    data(){
      return{
        maskFlag: false,
        balls:[
          {
            show: false,
            index: 0
          },{
            show:false,
            index: 1
          },{
            show:false,
            index: 2
          },{
            show:false,
            index: 3
          },{
            show:false,
            index: 4
          }],
        dropBalls: []
      }
    },
    props: {
      deliveryPrice: {
        type: Number,
        default: 0
      },
      minPrice: {
        type: Number
      }
    },
    methods:{
      toogleCart(){
        if(this.foodsCount<=0){
          return;
        }
        this.maskFlag = !this.maskFlag;
        if(this.maskFlag){

          this.$nextTick(() =>{
            if(!this.scroll){
              this.scroll = new BScroll(this.$refs.listContent,{
                click: true
              })
            }else{
              this.scroll.refresh();
            }
          })
        }
      },
      clearCart(){
        mui.confirm('清空购物车',(e)=>{
          if(e.index===1){
            this.$store.commit('delCar');
          }
        });
      },
      pay(){
        if(this.countPrice>= this.minPrice){
          mui.alert(`你一共消费￥${this.countPrice}`)
        }
      },
      beforeEnter(el){
        el.style.transform = `translate(0,0)`;
        let count = this.balls.length
        while(count--){
          let ball = this.balls[count];
          if(ball.show){
            let rect = ball.el.getBoundingClientRect();
            let x = rect.left - 32;
            let y =  -(window.innerHeight-rect.top-22);
            el.style.display = '';
            el.style.transform = `translate3d(0,${y},0)`;
            el.style.WebkitTransform = `translate3d(0,${y}px,0)`;
            let inner = el.getElementsByClassName('inner-hook')[0];
            inner.style.transform = `translate3d(${x} ,0 ,0)`;
            inner.style.WebkitTransform = `translate3d(${x}px ,0 ,0)`;
          }
        }
      },
      enter(el){
        el.offsetWidth;
        //获取球和小车位置 计算移动距离
        this.$nextTick(() => {
          el.style.transform = `translate3d(0,0,0)`;
          el.style.WebkitTransform = `translate3d(0,0,0)`;
          let inner = el.getElementsByClassName('inner-hook')[0];
          inner.style.transform = `translate3d(0,0,0)`;
          inner.style.WebkitTransform = `translate3d(0,0,0)`;
        })
      },
      afterEnter(el){
        let ball = this.dropBalls.shift();
        if(ball){
          ball.show = false;
          el.style.display = "none";
        }
      },
      drop(el){
        for(let i=0;i<this.balls.length;i++){
          let ball = this.balls[i];
          if(!ball.show){
            ball.show = true;
            ball.el = el;
            this.dropBalls.push(ball);
            return;
          }
        }
      }
    },
    computed: {
      foods() {
        return this.$store.state.car;
      },
      foodsCount() { //商品数量
        let count = 0;
        for (let i = 0; i < this.foods.length; i++) {
          count += this.foods[i].count;
        }
        return count;
      },
      countPrice() { //商品总价
        let count_price = 0;
        for (let i = 0; i < this.foods.length; i++) {
          count_price += this.foods[i].price * this.foods[i].count;
        }
        return count_price;
      },
      payPrice() { //是否达到起送价
        if (this.countPrice === 0) {
          return `￥${this.minPrice}元起送`;
        } else if (this.countPrice < this.minPrice) {
          return `还差￥${this.minPrice - this.countPrice}元起送`;
        } else {
          return '去结算';
        }
      }
    },
    watch:{
      foodsCount(val){
        if(val<=0){
          this.maskFlag = false;
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .shopcart_wrapper {
    width: 100%;
    position: fixed;
    height: 48px;
    bottom: 0;
    left: 0;
    z-index: 1000;
    .shopcart {
      display: flex;
      height: 100%;
      width: 100%;
      z-index: 1000;
      position: absolute;
      background: #141d27;
      .content-left {
        flex: 1;
        display: flex;
        .logo-wrapper {
          margin: 0 12px;
          padding: 6px;
          z-index: 1000;
          box-sizing: border-box;
          position: relative;
          top: -10px;
          background: #141d27;
          border-radius: 50%;
          width: 58px;
          height: 58px;
          .radius {
            height: 44px;
            width: 44px;
            background-color: #2B343C;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            .icon-shopping_cart {
              color: #999;
              font-size: 24px;
            }
            &.current {
              background-color: #00a0dc;
              .icon-shopping_cart {
                color: #fff;
              }
            }
          }
          .badge {
            position: absolute;
            top: -3px;
            right: 3px;
            span {
              padding: 0 5px;
              height: 16px;
              font-size: 9px;
              font-weight: 700;
              background-color: #f01414;
              border-radius: 16px;
              text-align: center;
              line-height: 16px;
              color: #fff;
            }
          }
        }
        .price {
          font-size: 16px;
          line-height: 24px;
          color: #999;
          font-weight: 700;
          padding-right: 12px;
          margin: 12px 0;
          border-right: 1px solid rgba(255, 255, 255, .1);
          &.priceSelect {
            color: #fff;
          }
        }
        .desc {
          margin-left: 12px;
          font-size: 12px;
          color: #999;
          font-weight: 700;
          line-height: 48px;
        }
      }
      .content-right {
        flex: 0 0 105px;
        width: 105px;
        margin-left: 12px;
        box-sizing: border-box;
        color: rgba(255, 255, 255, .4);
        font-weight: 700;
        background: #2B343C;
        line-height: 48px;
        font-size: 12px;
        text-align: center;
        &.pay_button {
          background-color: #00b43c;
          color: #fff;
        }
      }
    }
    .cartInfo {
      position: absolute;
      bottom: 48px;
      width: 100%;
      left: 0;
      z-index: 100;
      .list-header {
        display: flex;
        padding: 0 18px;
        justify-content: space-between;
        height: 40px;
        background-color: #f3f5f7;
        @include border-1px(rgba(7, 17, 27, .1));
        .title {
          line-height: 40px;
          color: rgb(7, 17, 27);
          font-weight: 200;
          font-size: 14px;
        }
        .clear {
          font-size: 12px;
          color: rgb(0, 160, 220);
          line-height: 40px;
        }
      }
      .list-wrapper {
        max-height: 217px;
        overflow: hidden;
        background-color: #fff;
        .list-cell {
          padding: 0 18px;
          height: 48px;
          display: flex;
          justify-content: space-between;
          @include border-1px(rgba(7, 17, 27, .1));
          background-color: #fff;
          .name {
            margin: 12px 0;
            line-height: 24px;
            font-size: 14px;
            color: rgb(7, 17, 27);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .rt-box {
            display: flex;
            justify-content: space-between;
            margin: 12px 0 12px 18px;
            align-items: center;
            .price {
              font-size: 14px;
              color: rgb(240, 20, 20);
              font-weight: 700;
              margin-right: 12px;
              line-height: 24px;
            }
          }

        }
      }
    }
    .list-mask {
      backdrop-filter: blur(10px);
      z-index: 10;
      width: 100%;
      position: fixed;
      background-color: rgba(7, 17, 27, .6);
      top: 0;
      bottom: 48px;
    }
  }
  .ball{
    position: absolute;
    width: 16px;
    height: 16px;
    left: 32px;
    bottom: 22px;
    z-index: 200;
    .inner{
      background-color: rgb(0,160,220);
      border-radius: 50%;
      height: 16px;
      width: 16px;
    }
    &.drop-enter-active,&.drop-leave-active {
      transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);
      .inner {
        transition: all 0.4s linear;
      }
    }
  }
  .toggleCar-enter,.toggleCar-leave-to{
    opacity: 0;
    background-color: rgba(7,17,27,0);
  }
  .toggleCar-enter-active,
  .toggleCar-leave-active{
    background-color: rgba(7,17,27,0.6);
    transition: all .5s ease;
  }
  .fold-enter,.fold-leave-to{
    opacity: 0;
    transform: translateY(100px);
  }
  .fold-enter-active,
  .fold-leave-active {
    transition: all 0.5s ease;
  }
</style>
